<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Electrical 1.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/box/assets/css/style.css">
    <link rel="stylesheet" href="/box/assets/css/loader-style.css">
    <link rel="stylesheet" href="/box/assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/box/assets/js/progress-bar/number-pb.css">
    <script src="/box/js/config.js"></script>
    <script src="/box/js/jquery-3.3.1.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        * {
            box-sizing: border-box;
        }
        .img-profile {
            margin: 0;
            text-align: left;
            width: 158px;
            height: 158px;
        }
    </style>
</head>

<body>
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!--  导航栏  -->
    <div id="app">
        <nav role="navigation" class="navbar navbar-static-top">
            <div class="container-fluid">
                <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                    <!--  时间  -->
                    <div id="nt-title-container" class="navbar-left running-text visible-lg" style="width: auto;">
                        <ul class="date-top">
                            <li class="entypo-calendar" style="margin-right:5px"></li>
                            <li id="Date"></li>
                        </ul>
                        <ul id="digital-clock" class="digital" style="box-shadow: none; border: none">
                            <li class="entypo-clock" style="margin-right:5px"></li>
                            <li id="time"></li>
                        </ul>
                    </div>
                    <!--  右侧导航  -->
                    <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                        <!--  头像  -->
                        <li>
                            <a class="dropdown-toggle">
                                <img class="admin-pic img-circle" :src="user.headPortrait">Hi,  <span>{{user.userName}}</span>
                            </a>
                        </li>
                        <!--  退出登录  -->
                        <li>
                            <a class="dropdown-toggle" href="../login.html" onclick="if(confirm('真的要退出登录吗')){sessionStorage.clear();}else{return false;}">
                                <i style="color: #fff;" class="entypo-logout"></i> Logout
                            </a>
                        </li>
                        <!--  打开右侧菜单  -->
                        <li class="hidden-xs">
                            <a class="toggle-left" href="#">
                                <span style="font-size:20px;" class="entypo-list-add"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--  左侧目录  -->
        <div id="skin-select">
            <div id="logo">
                <h1>Electrical<span>v1.1</span></h1>
            </div>
            <a id="toggle">
                <span class="entypo-menu"></span>
            </a>
            <div class="dark">
                <form action="#">
                <span>
                    <input type="text" name="search" class="search rounded id_search" placeholder="Search Menu..." autofocus="">
                </span>
                </form>
            </div>
            <div class="search-hover">
                <form id="demo-2">
                    <input type="search" placeholder="Search Menu..." class="id_search">
                </form>
            </div>
            <div class="skin-part">
                <div id="tree-wrap">
                    <div class="side-bar">
                        <ul class="topnav menu-left-nest" v-for="item in pers">
                            <template v-if="item.parentId == null">
                                <li>
                                    <a :href="item.url" style="border-left:0 solid!important;" class="title-menu-left">
                                        <span>{{item.name}}</span>
                                        <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>
                                    </a>
                                </li>
                                <li class="zhan" v-for="sec in pers">
                                    <a class="tooltip-tip ajax-load" :href="sec.url"target="box"  :title="sec.name" v-if="sec.parentId == item.permissionId && sec.type == 'menu'">
                                        <i class="icon icon-view-thumb"></i>
                                        <span>{{sec.name}}</span>
                                    </a>
                                    <ul>
                                        <li class="zhan" v-for="three in pers">
                                            <a class="tooltip-tip2 ajax-load" :href="three.url" target="box" :title="three.name" v-if="three.parentId == sec.permissionId && three.type == 'menuThree'">
                                                <i class="entypo-doc-text"></i>
                                                <span>{{three.name}}</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--  主体  -->
        <div class="wrap-fluid">
            <div class="container-fluid paper-wrap bevel tlbr">
                <div class="row">
                    <div id="paper-top">
                        <div class="col-lg-3">
                            <h2 class="tittle-content-header">
                                <i class="icon-window"></i>
                                <span>Dashboard</span>
                            </h2>
                        </div>
                        <div class="col-lg-7">
                            <div class="devider-vertical visible-lg"></div>
                        </div>
                        <div class="col-lg-2">
                            <div class="devider-vertical visible-lg"></div>
                            <div class="btn-group btn-wigdet pull-right visible-lg">
                                <div class="btn">Widget</div>
                                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul role="menu" class="dropdown-menu">
                                    <li>
                                        <a href="#">
                                            <span class="entypo-plus-circled margin-iconic"></span>Add New</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="paper-middle">
                    <div id="mapContainer">
                        <div class="layui-body" style="height: 100%">
                            <iframe height="100%" width="100%" src="/box/home.html" name="box" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
                <div class="content-wrap" style="display: none">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="chart-wrap">
                                <div class="chart-dash">
                                    <!-- <div id="sparkline"></div> -->
                                    <div id="placeholder" style="width:100%;height:200px;"></div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="speed">
                                            <h2>Speed Avarage</h2>
                                            <h1>74
                                                <span>Km / hours</span>
                                            </h1>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="traffic">
                                            <h2>Traffic per day</h2>
                                            <h1>2.5874</h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="traffic-rates">
                                            <h4>Traffic Rates</h4>
                                            <h1>76 %
                                                <span>-1,2 %</span>
                                            </h1>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="traffic-rates">
                                            <h4>Traffic Rates</h4>
                                            <h1>25 %
                                                <span>-1,8 %</span>
                                            </h1>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="traffic-rates">
                                            <h4>Traffic Rates</h4>
                                            <h1>83 %
                                                <span>-1,9 %</span>
                                            </h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="weather-icon">
                                        <i class="wi-day-lightning"></i>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div class="weather-text">
                                        <h2>Berlin
                                            <br><i>Day Lightning</i>
                                        </h2>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="weather-text">
                                        <h3><i class="wi-thermometer"></i>18<i class="wi-celcius"></i>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="weather-dash">
                                <div class="row">
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Mon</h2>
                                            <h3>85
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4>
                                                <span><i class="wi-day-lightning"></i>
                                                </span>
                                            </h4>
                                            <h5>15
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Tue</h2>
                                            <h3>81
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4><i class="wi-day-cloudy"></i>
                                            </h4>
                                            <h5>12
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Wed</h2>
                                            <h3>83
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4><i class="wi-rain-mix"></i>
                                            </h4>
                                            <h5>14
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Thu</h2>
                                            <h3>80
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4><i class="wi-day-sunny"></i>
                                            </h4>
                                            <h5>15
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Fri</h2>
                                            <h3>79
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4><i class="wi-day-storm-showers"></i>
                                            </h4>
                                            <h5>11
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="daily-weather">
                                            <h2>Sat</h2>
                                            <h3>82
                                                <span><i class="wi-fahrenheit"></i>
                                                </span>
                                            </h3>
                                            <h4><i class="wi-cloudy"></i>
                                            </h4>
                                            <h5>10
                                                <i>km/h</i>
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-space" style="position: absolute; bottom: 0;"></div>
            </div>
        </div>
        <!--  右侧目录  -->
        <div class="sb-slidebar sb-right">
            <div class="right-wrapper">
                <div class="row">
                    <h3>
                        <span><i class="entypo-vcard"></i>&nbsp;&nbsp;用户基本信息</span>
                    </h3>
                    <div class="col-lg-12 text-center">
                        <ul class="list-group">
                            <li class="list-group-item text-center"><img :src="user.headPortrait" class="img-circle img-responsive img-profile"></li>
                            <li class="list-group-item text-right">
                                <span class="pull-left"><strong>姓名</strong></span>{{user.userName}}
                            </li>
                            <li class="list-group-item text-right">
                                <span class="pull-left"><strong>性别</strong></span>{{user.sex = 1 ? '女' : '男'}}
                            </li>
                            <li class="list-group-item text-right">
                                <span class="pull-left"><strong>地址</strong></span>{{user.address}}
                            </li>
                            <li class="list-group-item text-right">
                                <span class="pull-left"><strong>手机</strong></span>{{user.phone}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/box/js/vue.js"></script>
    <script src="/box/js/json2.js"></script>
    <!--  左侧权限目录  -->
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                user : '',
                login_local : null
            },
            computed : {
                pers : function () {
                    return this.login_local.user_pers;
                }
            },
            created : function () {
                var data = JSON.parse(sessionStorage.getItem("login_user"));
                this.login_local = data;
                this.user = data.user;
            }
        });
        //  因为不知道为什么 条件判断(v-if) 不起作用，所以只能在最后那些JS文件起作用之前，将多循环出来的东西删掉
        $(document).ready(function () {
            $(".side-bar ul.topnav").each(function() {
                if(!$(this).find("li").length) {
                    $(this).remove();
                }
                $(".topnav li.zhan").each(function () {
                    if (!$(this).find("a").length) {
                        $(this).remove();
                    }
                });
            });
            $("li.zhan ul").each(function () {
                if (!$(this).find("li").length) {
                    $(this).remove();
                }
            });
        });
    </script>
    <script src="/box/assets/js/jquery.js"></script>
    <script src="/box/assets/js/progress-bar/src/jquery.velocity.min.js"></script>
    <script src="/box/assets/js/progress-bar/number-pb.js"></script>
    <script type="text/javascript" src="/box/assets/js/preloader.js"></script>
    <script type="text/javascript" src="/box/assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="/box/assets/js/load.js"></script>
    <script type="text/javascript" src="/box/assets/js/main.js"></script>
    <script type="text/javascript" src="/box/assets/js/countdown/jquery.countdown.js"></script>
    <!--  显示时间（只有  时分秒）  -->
    <script type="text/javascript">
        $(function() {
            startTime();
        });

        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();

            // add a zero in front of numbers<10
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);

            var day_or_night = (h > 11) ? "PM" : "AM";

            //Convert to 12 hours system
            // if (h > 12)
            //     h -= 12;

            //Add time to the headline and update every 500 milliseconds
            $('#time').html(h + " : " + m + " : " + s + " " + day_or_night);
            setTimeout(function() {
                startTime()
            }, 500);
        }

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    </script>
    <!--  底部版权  -->
    <div style="text-align:center;">
        <p>I am a programmer. <a href="http://www.baidu.com/" target="_blank" title="北大青鸟">北大青鸟</a> - Collect from</p>
    </div>
</body>
</html>